import React from 'react';
import './index.css'
import CardList from '../cardList/CardList'
import data from "../../../../data/orderData/Data";
import {Pagination} from "antd";
import Search from "../search/Search";

/**
 * @author: RenLishisan
 * @description: 渲染搜索组件，订单类容组件，和翻页组件，包括单独头部菜单栏。存放state数据和翻页逻辑
 * @param:
 * @return:
 * @time: 2020/10/30
 **/
const pageSize = 6

class Context extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            dataSource: [],
            currentPage: 1
        }
    }

    page = (page) => {
        this.setState({
            currentPage: page
        })
    }

    componentDidMount() {
        this.setState({
            dataSource: data
        })
    }

    pageData = () => {
        const {dataSource, currentPage} = this.state
        return dataSource.slice((currentPage - 1) * pageSize, currentPage * pageSize)
    }

    render() {
        const {dataSource} = this.state;
        return (

            <div className='order-context'>
                <div className='order-card'>
                    <Search/>
                    <table className='card-list-head'>
                        <tbody className='list-tbody'>
                        <tr>
                            <td className='card-tbody-a'>商品名称</td>
                            <td className='list-tbody-b'>进货单价</td>
                            <td className='list-tbody-c'>发布数量</td>
                            <td className='list-tbody-d'>发布单价</td>
                            <td className='list-tbody-e'>克隆到店铺</td>
                        </tr>
                        </tbody>
                    </table>
                    {this.pageData().map(item => <CardList key={item.orderId} item={item}/>)}
                    <Pagination
                        className='order-search'
                        size="small"
                        onChange={this.page}
                        pageSize={pageSize}
                        total={dataSource.length}
                        showQuickJumper
                    />
                </div>

            </div>

        );
    }
}

export default Context;